<template>
    <section>

        <br><br><el-col>基本信息</el-col><br><br>
        <div class="div-padd">
            <el-form label-position="left" inline class="demo-table-expand" v-if="conItem.customer_type == 1">
                <el-form-item label="客户姓名:"><span>{{conItem.customer_full_name}} </span></el-form-item>
                <el-form-item label="证件类型:"><span>{{dict.contract_identity_type[conItem.customer_identity_type]}} </span></el-form-item>
                <el-form-item label="证件号码:"><span>{{ conItem.customer_identity_no }} </span></el-form-item>
                <el-form-item label="性别:"><span>{{ dict.contract_customer_gender[conItem.customer_gender] }} </span></el-form-item>
                <el-form-item label="联系电话:"><span>{{conItem.customer_mobile}} </span></el-form-item>
                <el-form-item label="联系地址:"><span>{{conItem.customer_address}} </span></el-form-item>
            </el-form>
            <el-form label-position="left" inline class="demo-table-expand" v-else>
                <el-form-item label="企业名称:"><span>{{conItem.company_name}} </span></el-form-item>
                <el-form-item label="营业执照号码/统一社会信用代码:"><span>{{conItem.credit_no}} </span></el-form-item>
                <el-form-item label="组织机构代码证号码:"><span>{{ conItem.customer_identity_no }} </span></el-form-item>
                <el-form-item label="法定代表人或负责人:"><span>{{ conItem.customer_full_name }} </span></el-form-item>
                <el-form-item label="联系电话:"><span>{{conItem.customer_mobile}} </span></el-form-item>
            </el-form>
        </div>

        <br><br><el-col>销售信息</el-col><br><br>
        <div class="div-padd">
            <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="销售姓名:"><span>{{conItem.sale_name}} </span></el-form-item>
            </el-form>
        </div>

        <br><br> <el-col>合同信息</el-col><br><br>
        <!-- ============================================ 私募表单 start ================================================ -->
        <div class="div-padd" v-if="conItem.type == 4">
            <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="合同编号:"><span>{{conItem.no}} </span></el-form-item>
                <el-form-item label="产品名称:"><span>{{conItem.product_name}} </span></el-form-item>
                <el-form-item label="合同金额:"><span>{{amountFormatter(conItem.amount/100)}} </span></el-form-item>
                <el-form-item label="合同生效日:"><span>{{conItem.term_start}} </span></el-form-item>
            </el-form>
        </div>
        <!-- ============================================ 私募表单 end ================================================ -->

        <!-- ============================================ 有限合伙等表单 start ================================================ -->
        <div class="div-padd" v-else>
            <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="合同编号:"><span>{{conItem.no}} </span></el-form-item>
                <el-form-item label="产品名称:"><span>{{conItem.product_info}} </span></el-form-item>
                <el-form-item label="投资期限:"><span>{{dict.contract_investment_period[conItem.investment_period] }} </span></el-form-item>
                <el-form-item label="客户收益返还方式:"><span>{{dict.contract_income_return_type[conItem.income_return_type]}} </span></el-form-item>
                <el-form-item label="预期收益率(%):"><span>{{ conItem.expected_rate_of_return/10000 }} </span></el-form-item>
                <el-form-item label="合同金额:"><span>{{amountFormatter(conItem.amount/100)}} </span></el-form-item>
                <el-form-item label="预期收益(元):"><span>{{amountFormatter(conItem.expected_earnings/100)}} </span></el-form-item>
                <el-form-item label="月返还收益(元):"><span>{{amountFormatter(conItem.month_return/100)}} </span></el-form-item>
                <el-form-item label="合同生效日:"><span>{{conItem.term_start}} </span></el-form-item>
                <el-form-item label="合同到期日:"><span>{{conItem.term_end}} </span></el-form-item>
                <el-form-item label="赠金:"><span>{{conItem.donation_amount}} </span></el-form-item>
                <el-form-item label="到账方式:"><span>{{conItem.payment_method}} </span></el-form-item>
                <el-form-item label="签订类型:"><span>{{dict.contract_sign_type[conItem.sign_type] }} </span></el-form-item>
            </el-form>
        </div>
        <!-- ============================================ 有限合伙等表单 end ================================================ -->


        <br><br>
        <el-col>银行信息</el-col><br><br>
        <div class="div-padd">
            <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="账户名称:"><span>{{conItem.bank_account_name}}</span></el-form-item>
                <el-form-item label="银行账号:"><span>{{conItem.bank_no}}</span></el-form-item>
                <el-form-item label="开户行名称:"><span>{{conItem.bank_branch_name}}</span></el-form-item>
                <el-form-item label="开户行地址:"><span>{{conItem.bank_address}}</span></el-form-item>
            </el-form>
        </div>
        <br><br>
        <el-col>附件信息</el-col><br><br>
        <div class="div-padd">
            <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item>
                    <div v-for="item in conItem.attachment_info"><a :href="item.url" target="_blank">{{item.name}}</a></div>
                    <!--<p v-for="item in attachment_info"><span>{{item.file_name}}</span></p>-->
                </el-form-item>
            </el-form>
        </div>
        <br><br>
        <el-col>合同状态</el-col><br><br>
        <div class="div-padd">
            <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="合同状态:"><span>{{dict.contract_state[conItem.state]}}</span></el-form-item>
                <el-form-item label="备注:"><span>{{conItem.remark}}</span></el-form-item>
            </el-form>
        </div>

    </section>
</template>
<script>
    // import * as API from '../../api/contract_api';
    import * as commons from '../../common/js/commons';
    import dict from '../../common/js/dict';

    export default {

        props: ["con_info"],
        data () {
            return {
                conItem: {},
                dict: dict
            }
        },
        created () {
            // 组件创建完后获取数据，
            // 此时 data 已经被 observed 了
            this.fetchData()
        },
        methods: {
            fetchData(){
                this.conItem.id = this.$route.params.id;
            },
            isBirthDate(val){
                return commons.isBirthDate(val);
            },
            amountFormatter(val) {
                return commons.formatNum(val);
            }
        },
        watch: {
            // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
            '$router': 'fetchData',

            con_info(val, oldVal){//普通的watch监听
                this.conItem = val;
                // <!-- ============================================ 销售姓名拼接 ================================================ -->
                var department_name = this.conItem.sale_department_name==null ? '' : '/' + this.conItem.sale_department_name;
                var team_name = this.conItem.sale_team_name==null ? '' : '/' + this.conItem.sale_team_name;
                this.conItem.sale_name = this.conItem.sale_name + department_name + team_name;

                // <!-- ============================================ 根据合同类型  产品名称拼接 ================================================ -->
                var name = this.conItem.product_name == null ? '' : this.conItem.product_name;
                var p = this.conItem.investment_period == null ? '' : " - " + dict.contract_investment_period[this.conItem.investment_period];    //投资期限
                var t = this.conItem.income_return_type == null ? '' : " - " + dict.contract_income_return_type[this.conItem.income_return_type];    //客户收益返还方式
                var r = this.conItem.expected_earnings == null ? '' : " - " + (this.conItem.expected_earnings/10000) + "%"; //预期收益率
                this.conItem.product_info = name + p + r + t;

            },
        },
        mounted(){}
    }
</script>
<style lang="scss" scoped>
    .el-col .el-col-24{
        text-align:left;font-weight: bolder;font-size: 14px;
    }
    .div-padd{
       // padding: 10px 230px;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 40%;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

</style>
